import React, { useState, useEffect } from 'react';
import './PackageModal.css';
import closeImg from '../../assets/login/close.png';
import dbxlBackImg from '../../assets/icon/dbxl-back.png';
import iconBackImg from '../../assets/icon/icon-back.png';

// 导入所有图标图片
import hshsImg from '../../assets/icon/hshs.png';
import myflImg from '../../assets/icon/myfl.png';
import jzjlImg from '../../assets/icon/jzjl.png';
import szjxImg from '../../assets/icon/szjx.png';
import jyczImg from '../../assets/icon/jycz.png';
import hwylImg from '../../assets/icon/hwyl.png';
import jbaxImg from '../../assets/icon/jbax.png';
import thggImg from '../../assets/icon/thgg.png';
import ylghImg from '../../assets/icon/ylgh.png';
import plrsImg from '../../assets/icon/plrs.png';
import nnyyImg from '../../assets/icon/nnyy.png';

/**
 * 图标和文字数据数组
 * 包含15个图标的图片和对应的文字描述
 */
const imagesText = [{
  img: hshsImg,
  text: '好事"花生"',
}, {
  img: hshsImg,
  text: '杠上开"发"',
}, {
  img: hshsImg,
  text: '好透"莲连"',
}, {
  img: szjxImg,
  text: '步步高升',
}, {
  img: hshsImg,
  text: '"柿柿"如意',
}, {
  img: myflImg,
  text: '"莓"有烦恼',
}, {
  img: jzjlImg,
  text: '禁止"蕉"绿',
}, {
  img: szjxImg,
  text: '升职加薪',
}, {
  img: jyczImg,
  text: '教育成长',
}, {
  img: hwylImg,
  text: '毫无"鸭梨"',
}, {
  img: jbaxImg,
  text: '"家"倍安心',
}, {
  img: thggImg,
  text: '"桃花"滚滚',
}, {
  img: ylghImg,
  text: '养老规划',
}, {
  img: plrsImg,
  text: '"票"亮人生',
}, {
  img: nnyyImg,
  text: '年年有"鱼"',
}];

/**
 * 打包行李弹框组件
 * @param {boolean} isVisible - 弹框是否显示
 * @param {function} onClose - 关闭弹框的回调函数
 * @param {array} selectedItems - 已选择的行李项目索引数组（可选，优先使用localStorage数据）
 */
const PackageModal = ({ isVisible, onClose, selectedItems = [] }) => {
  // 从localStorage读取打包数据的状态
  const [packageData, setPackageData] = useState(null);
  const [displayItems, setDisplayItems] = useState([]);

  // 组件挂载时从localStorage读取数据
  useEffect(() => {
    if (isVisible) {
      try {
        const savedData = localStorage.getItem('package_data');
        if (savedData) {
          const parsedData = JSON.parse(savedData);
          console.log('从localStorage读取到打包数据:', parsedData);
          setPackageData(parsedData);
          setDisplayItems(parsedData.selectedItems || []);
        } else {
          // 如果localStorage中没有数据，使用传入的selectedItems
          console.log('localStorage中没有打包数据，使用传入的selectedItems:', selectedItems);
          setDisplayItems(selectedItems);
        }
      } catch (error) {
        console.error('读取localStorage中的打包数据失败:', error);
        setDisplayItems(selectedItems);
      }
    }
  }, [isVisible, selectedItems]);

  if (!isVisible) return null;

  return (
    <div className="package-modal-overlay" onClick={onClose}>
      <div
        className="package-modal-content"
        style={{
          backgroundImage: `url(${dbxlBackImg})`,
          width: '90%',
          height: '200px',
          backgroundSize: '100% 100%',
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat'
        }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="package-modal-close-btn" onClick={onClose}>
          <img src={closeImg} alt="关闭" style={{ width: '100%', height: '100%' }} />
        </div>
        <div className="package-modal-body">
          <div className="package-modal-title">
            我的行囊
          </div>

          {/* 已选择的行李展示区域 */}
          <div className="package-items-grid">
            {displayItems.map((itemIndex) => (
              <div
                key={itemIndex}
                className="package-item"
                style={{
                  backgroundImage: `url(${iconBackImg})`
                }}
              >
                <div
                  className="package-item-icon"
                  style={{
                    backgroundImage: `url(${imagesText[itemIndex]?.img})`
                  }}
                ></div>
                <div className="package-item-text">
                  {imagesText[itemIndex]?.text}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default PackageModal;